<template>
  <div class="radio">
    <div v-if="form.type === 1">
      <div
        class="rad"
        v-for="(item, index) in form.select_options"
        :key="index"
      >
        <el-radio
          v-model="form.single_select_answer"
          :label="item.label"
          @change="radChange"
          >{{ item.label }}</el-radio
        >
        <el-input v-model="item.text"></el-input>
        <!-- action 上传的地址
            show-file-list 是否显示上传列表
            on-success function(response, file, fileList) 文件上传时的钩子
            before-upload function(file) 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传
         -->
        <Uplode v-model="item.image"></Uplode>
      </div>
    </div>
    <div v-else-if="form.type === 2">
      <div
        class="rad"
        v-for="(item, index) in form.select_options"
        :key="index"
      >
        <el-checkbox
          v-model="form.multiple_select_answer"
          :label="item.label"
          >{{ item.label }}</el-checkbox
        >
        <el-input v-model="item.text"></el-input>
        <Uplode v-model="item.image"></Uplode>
      </div>
    </div>
    <div v-else>
      <el-input
        type="textarea"
        :rows="5"
        placeholder="请输入内容"
        v-model="form.short_answer"
      >
      </el-input>
    </div>
  </div>
</template>

<script>
import Uplode from './uplode.vue'
export default {
  components: { Uplode },
  props: ['form'],
  data () {
    return {}
  },
  methods: {
    radChange () {
      this.$emit('clearForm', 'single_select_answer')
    }
  }
}
</script>

<style scoped lang="scss">
.radio {
  .rad {
    display: flex;
    align-items: center;
  }
}
</style>
